import { createApp,createVNode,render } from 'vue';
import './style.css';
import App from './App.vue';
import debounceDirective from './directives/debounceDirectve'; // 确保路径正确
// 路由
import router from './router/index.ts';
import ElementPlus from 'element-plus'
import { createPinia,PiniaPluginContext } from "pinia";

import lodingBar from "@/components/lodingBar.vue";

// 创建 pinia 实例
const pinia = createPinia();
const app = createApp(App);

// 全局注册自定义指令
// 第一个参数是指令名，第二个参数是指令对象
//根据使用频率选择是否注册全局自定义指令
//app.directive('debounce', debounceDirective);
type Options = {
    key?:string
}
const __piniaKey__:string= 'blog'

const setStorage= (key:string,value:any)=>{
    if(key){
        localStorage.setItem(key,JSON.stringify(value))
    }
}
const getStorage= (key:string)=>{
    return localStorage.getItem(key)? JSON.parse(localStorage.getItem(key) as string) :{}
}

const piniaPlugin= (options:Options)=>{
    return (context:PiniaPluginContext)=>{
        const {store} = context;
        // 监听数据变化
        const data= getStorage(`${options.key??__piniaKey__}-${store.$id}`)
        console.log('data',data);
        store.$subscribe(()=>{
            setStorage(`${options.key??__piniaKey__}-${store.$id}`,store.$state)
        })
        return {
            ...data
        }
    }
}
pinia.use(piniaPlugin({
    key: 'pinia'
}))

app.use(router).use(pinia).use(ElementPlus).mount('#app');
